<template>
 <div class="AlignContent-Box">
   <div class="AlignContent-title">
     <span>定义了多根轴线的对齐方式</span>
      <select @change="getIndex">
          <option v-for="(itme,index) in value" :key="index" :value="itme.value"  >{{itme.value+"/"+itme.Title}}</option>
    </select>
   </div>
   <div class="AlignContent-Content" :style="ValueClass">
     <div class="Spindle1">
       <div class="AlignContent-Content-Chid"></div>
       <div class="AlignContent-Content-Chid"></div>
       <div class="AlignContent-Content-Chid"></div>
     </div>
        <div class="Spindle2">
       <div class="AlignContent-Content-Chid"></div>
       <div class="AlignContent-Content-Chid"></div>
       <div class="AlignContent-Content-Chid"></div>
     </div>
        <div class="Spindle3">
       <div class="AlignContent-Content-Chid"></div>
       <div class="AlignContent-Content-Chid"></div>
       <div class="AlignContent-Content-Chid"></div>
     </div>
   </div>
 </div>
</template>
<script>
         
export default {
  data(){ 

   return {

    value:[//定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
   {value:' flex-start',Title:'与交叉轴的起点对齐'},
   {value:'flex-end',Title:'交叉轴的终点对齐'},
   {value:'center',Title:'与交叉轴两端对齐'},//与交叉轴两端对齐，轴线之间的间隔平均分布
   {value:'space-between',Title:'第一行文字的基线对齐'},
    {value:'space-around',Title:'每根轴线两侧的间隔都相等'}//每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
 ],
 ValueClass:''

   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。



  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.click(this.key)

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){

 this.$store.state.HeaderTitle = "AlignContent"



 },
  getIndex(index) {
       this.ValueClass = "align-content:" +index.target.value +";";
       console.log( this.valueClass)
    }

  }

}

</script>

<style lang="scss"  scope>
   .AlignContent-Box{
     flex: 1;
     background-color: chocolate;
   }
   .AlignContent-title {
     width: 100%;
     height: 30px;
     background-color: cadetblue;
     color: white;
     font-size: 12px;
     display: flex;
     justify-content: space-around;
   }
   .AlignContent-Content {
     height: 700px;
     width: 100%;
     background-color:darksalmon;
     display: flex;
     flex-flow: row wrap;
   
   }
   .Spindle1,.Spindle2,.Spindle3 {
     height: 100px;
     width: 200px;
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
     margin: 10px 0;
     background-color: red;
     
   }
   .AlignContent-Content-Chid {
     width: 20px;
     height: 20px;
     background-color: bisque;
     margin: 10px;
   }
  span {
    font-size: 12px;
  }
</style>